<template>
	<view class="login">
		<div class="pure_top"></div>
		<image class="logo" src="../static/images/logo.png" mode=""></image>
		<view class="content">
			<u-row gutter="150">
				<u-col span="12">
					<h3 class="title">注册</h3>
					<u-form :model="registerList" ref="registerList">
						<u-form-item prop="name" :left-icon-style="{width: '24rpx', height: '26rpx'}" left-icon="https://323928-project-supervision.oss-cn-beijing.aliyuncs.com/login_name.png">
							<u-input placeholder="请输入真实姓名" placeholderStyle="color: #D9D9D9" v-model="registerList.name" />
						</u-form-item>
						<u-form-item prop="card" :left-icon-style="{width: '24rpx', height: '26rpx'}" left-icon="https://323928-project-supervision.oss-cn-beijing.aliyuncs.com/login_card.png">
							<u-input maxlength="18" placeholder="请输入身份证号" placeholderStyle="color: #D9D9D9" v-model="registerList.card" />
						</u-form-item>
						<u-form-item prop="mobile" :left-icon-style="{width: '24rpx', height: '26rpx'}" left-icon="https://323928-project-supervision.oss-cn-beijing.aliyuncs.com/login_phone.png">
							<u-input maxlength="11" placeholder="请输入手机号" placeholderStyle="color: #D9D9D9" v-model="registerList.mobile" />
						</u-form-item>
						<u-form-item prop="code" :left-icon-style="{width: '24rpx', height: '26rpx'}" left-icon="https://323928-project-supervision.oss-cn-beijing.aliyuncs.com/login_code.png">
							<u-input placeholder="请输入验证码" placeholderStyle="color: #D9D9D9" v-model="registerList.code" />
						  <u-button size="mini" slot="right" type="primary" @click="getCode">{{codeText}}</u-button>
						</u-form-item>
						<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
						<u-form-item prop="password" :left-icon-style="{width: '24rpx', height: '26rpx'}" left-icon="https://323928-project-supervision.oss-cn-beijing.aliyuncs.com/login_pass.png">
							<u-input type="password" placeholder="请输入密码" placeholderStyle="color: #D9D9D9" v-model="registerList.password" />
						</u-form-item>
						<u-form-item prop="confirmPassword" :left-icon-style="{width: '24rpx', height: '26rpx'}" left-icon="https://323928-project-supervision.oss-cn-beijing.aliyuncs.com/login_pass.png">
							<u-input type="password" placeholder="请再次确认密码" placeholderStyle="color: #D9D9D9" v-model="registerList.confirmPassword" />
						</u-form-item>
					</u-form>
					<view class="submit">
						<u-button type="primary" shape="circle" @click="registerSubmit">注册</u-button>
					</view>
				</u-col>
			</u-row>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		name: 'login',
		data() {
			return {
				// 注册
				registerList: {
					name: '',
					card: '',
					code: '',
					mobile: '',
					password: '',
					confirmPassword: ''
				},
				key: '', // 发送验证码后的key
				codeText: '',
				rules: {
					name: [
						{
							required: true,
							message: '请输入姓名',
							trigger: ['blur', 'change']
						}
					],
					card: [
						{
							required: true,
							message: '请输入身份证号',
							trigger: ['blur', 'change']
						}
					],
					mobile: [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						}
					],
					code: [
						{
							required: true,
							message: '请输入验证码',
							trigger: 'blur'
						}
					],
					password: [
						{
							required: true,
							message: '请输入密码',
							trigger: ['blur', 'change']
						}
					],
					confirmPassword: [
						{
							required: true,
							message: '请再次输入密码',
							trigger: ['blur', 'change']
						}
					]
				}
			}
		},
		methods: {
			// 获取租户id
			getTenantId() {
				let _this = this;
				this.$ajax
					.get({
						url: '/blade-system/tenant/info?domain=http://project-supervision.sdhuan.cn'
					})
					.then(res => {
						// console.log(res);
						if (res.code == 200) {  
							try {
								if(res.data.tenantId){
									uni.setStorageSync('tenantId', res.data.tenantId);
								}                                  
							}catch (e) {}                            
						} else {}
					});
			},
			// 注册提交
			registerSubmit() {
				// if(this.$check.IDCardCheck(this.registerList.card)) {
					
				// 	} else {
				// 		this.$refs.uToast.show({
				// 			title: '请输入有效的身份证件号码',
				// 			type: 'error'
				// 		})
				// 	}
				this.$refs.registerList.validate(valid => {
					if (valid) {
					 //  console.log('提交注册');
						let that = this;
						let dataList = {
								confirmPassword: this.$md5(that.registerList.confirmPassword),
								idCard: that.registerList.card,
								password: this.$md5(that.registerList.password),
								phone: that.registerList.mobile,
								realName: that.registerList.name
						}			
						this.$ajax
							.post({
								url: '/blade-user/register',
								data: JSON.stringify(dataList),
								header: {
									'Sms-Captcha-Key': that.key,
									'Sms-Captcha-Code': that.registerList.code,
									"content-type":"application/json;charset=UTF-8",
								}
							})
							.then(res => {
								// console.log(res);
								if(res.code == 200) {
									this.$refs.uToast.show({
										title: '注册成功',
										type: 'success'
									})
									let  tenantId = uni.getStorageSync("tenantId") || '';
									if(!tenantId) {
										that.getTenantId()                    
										return;
									}
									let header1 = {
										 "content-type":"application/x-www-form-urlencoded;charset=UTF-8"
									}
									let loginList = {
										username: that.registerList.mobile,
										tenantId: tenantId,
										password: this.$md5(that.registerList.password),
									}
									setTimeout(() => {
										this.$ajax.post({
											url: '/blade-auth/oauth/token',
											data: loginList,
											header: header1
										}).then(res => {
											// console.log(res)
											if(res.account) {
												this.$refs.uToast.show({
													title: '登陆成功',
													type: 'success'
												})
												this.$store.commit('saveUserInfo', res) // 存储到store
												try {
													uni.setStorageSync('isUserTrue', 'true');
													uni.setStorageSync('token', res.access_token);						
												} catch (e) {
												  // error
												}                            
												this.$navJump.reLaunch('/pages/index/index');		
											} else {
												this.$refs.uToast.show({
													title: res.msg,
													type: 'error'
												})
											}
										})
									}, 1000)
								} else {
									let msg = res.msg
									if(msg.search(':')) {
										let dd = msg.indexOf(':')
										let msgs = msg.slice(dd+1)
										this.$refs.uToast.show({
											title: msgs,
											type: 'error'
										})
										} else {
											this.$refs.uToast.show({
												title: res.msg,
												type: 'error'
											})
										}
								}
							})
						
					} else {
						console.log('验证失败');
					}
				})
				
			},
			// 验证码操作
			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				if(this.$check.isMobile(this.registerList.mobile) == false) {
					this.$refs.uToast.show({
						title: '请正确填写手机号',
						type: 'error'
					})
				} else {
					if(this.$refs.uCode.canGetCode) {
						// 向后端请求验证码
						this.$ajax.post({
							url: `/blade-user/register/sendCode/${this.registerList.mobile}`
						}).then(res => {
							// console.log(res)
							if(res.code == 200) {
								uni.showLoading({
									title: '正在获取验证码'
								})
								setTimeout(() => {
									uni.hideLoading();
									this.$refs.uToast.show({
										title: '验证码发送成功',
										type: 'success'
									})
									// 通知验证码组件内部开始倒计时
									this.$refs.uCode.start();
								}, 1000);
								this.key = res.data
							} else {
								this.$refs.uToast.show({
									title: res.msg,
									type: 'error'
								})
							}
						})
						.catch(res => {
							console.log(res)
						})
					}else {
						this.$refs.uToast.show({
							title: '倒计时结束后再发送',
							type: 'warning'
						})
					}
				}
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.registerList.setRules(this.rules);
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		overflow-y: auto;
		.pure_top {
			width: 100%;
			height: 126rpx;
			position: relative;
			z-index: -1;
			overflow: hidden;
		}
		.pure_top::after {
			content: '';
			width: 100%;
			height: 126rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
			border-radius: 0 0 80% 80%;
			background: #3B85FE;
		}
		.logo{
			width: 28%;
			height: 204rpx;
			margin: -90rpx 36% 20rpx;
		}
		.content {
			.title {
				color: #3C86FE;
				font-size: 34rpx;
				font-weight: 600;
			}
		}
		.submit {
			margin: 100rpx 0 50rpx;
			/deep/.u-btn--primary{
				background:linear-gradient(to right ,#3B85FE, #3BC0FE)!important
			}
		}
    .bottom-tip {
			position: fixed;
			bottom: 2%;
			text-align: center;
			width: 100%;
			color: #B5B5B5;
			text {
				color: #3C86FE;
			}
		}
	}
	/deep/.u-form-item--left__content__icon {
		margin-bottom: -12rpx;
	}
	/deep/.u-icon__img {
		margin-top: -10rpx;
	}
</style>
